<template>
  <div class="tabbar">
    <router-link tag="div" class="item" to="recommend">
    <span>推荐</span>
    </router-link>
    <router-link tag="div" class="item" to="singer">
      <span>歌手</span>
    </router-link>
    <router-link tag="div" class="item" to="rank">
      <span>排行</span>
    </router-link>
    <router-link tag="div" class="item" to="search">
      <span>搜索</span>
    </router-link>
  </div>
</template>

<script>
export default {
  name:"Tabbar"
}
</script>

<style scoped lang="scss">
@import"../assets/css/mixin";
@import"../assets/css/variable";
.tabbar{
  width: 100%;
  height: 84px;
  display: flex;
  justify-content: space-around; //两边会留空隙
  @include bg_sub_color();
  //不会被拖拽
  // position: relative;
  // z-index: 999;
  .item{
    span{
      line-height: 84px;
      @include font_color();
      @include font_size($font_medium);
    }
    &.router-link-active{ //router-link激活状态
      span{
        @include font_active_color();//字体颜色
      }
        border-bottom: 5px solid #000;
        @include border_color();//下划线
    }
  }
}
</style>